import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import {
	getToken
} from '@/http/auth.js'
import http from '@/http/http.js'
import {
	isURL,
	isDynamicRoutes
} from '@/utils/validate.js'
import Register from '../components/common/Register.vue'

Vue.use(VueRouter)

// 定义路由跳转规则
// component 采用 路由懒加载形式
// 此项目中，均采用 name 方式指定路由进行跳转
/* 
	meta 用于定义路由元信息，
其中 
	isRouter 用于指示是否开启路由守卫（true 表示开启）。
	isTab 用于表示是否显示为标签页（true 表示显示）
	iframeUrl 用于表示 url，使用 http 或者 https 开头的 url 使用 iframe 标签展示
*/
const routes = [{
	path: '/',
	redirect: {
		name: "Login"
	}
},
{
	path: '/404',
	name: '404',
	component: () => import('@/components/common/404.vue')
},
{
	path: '/Login',
	name: 'Login',
	component: () => import('@/components/common/Login.vue')
},
{
    path: '/Register',
    name: 'Register',
    component: () => import('@/components/common/Register.vue')
},
{
	path: '/Home',
	name: 'Home',
	component: () => import('@/views/Home.vue'),
	redirect: {
		name: 'HomePage'
	},
	children: [{
		path: 'page',
		name: 'HomePage',
		component: () => import('@/views/menu/HomePage.vue'),
		meta: {
			isRouter: true
		}
	},
	{
		path: 'employer/profile',
		name: 'EmployerProfile',
		component: () => import('@/views/home/employer/Profile.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '企业信息',
			icon: 'el-icon-office-building'
		}
	},
	{
		path: 'employer/job',
		name: 'JobManagement',
		component: () => import('@/views/home/job/JobList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '职位管理',
			icon: 'el-icon-suitcase'
		}
	},
	{
		path: 'employer/applications',
		name: 'ApplicationList',
		component: () => import('@/views/home/application/ApplicationList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '申请管理',
			icon: 'el-icon-document'
		}
	},
	{
		path: 'userList',
		name: 'UserList',
		component: () => import('@/views/dynamic/sys/UserList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '用户管理',
			icon: 'el-icon-user',
			menuId: 2,
			parentId: 1,
			orderNum: 1,
			type: 1
		}
	},
	{
		path: 'seeker/profile',
		name: 'SeekerProfile',
		component: () => import('@/views/home/seeker/Profile.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '个人信息',
			icon: 'el-icon-user'
		}
	},
	{
		path: 'seeker/jobs',
		name: 'JobSearch',
		component: () => import('@/views/home/seeker/JobSearch.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '职位搜索',
			icon: 'el-icon-search'
		}
	},
	{
		path: 'seeker/applications',
		name: 'MyApplications',
		component: () => import('@/views/home/seeker/MyApplications.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '我的申请',
			icon: 'el-icon-document-checked'
		}
	},
	{
		path: 'admin/jobs',
		name: 'AdminJobList',
		component: () => import('@/views/home/admin/JobList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '职位管理',
			icon: 'el-icon-suitcase'
		}
	},
	{
		path: 'admin/applications',
		name: 'AdminApplicationList',
		component: () => import('@/views/home/admin/ApplicationList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '申请管理',
			icon: 'el-icon-document'
		}
	},
	{
		path: 'admin/fees',
		name: 'FeeManagement',
		component: () => import('@/views/home/admin/FeeManagement.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '费用管理',
			icon: 'el-icon-money'
		}
	},
	{
		path: 'admin/employment',
		name: 'EmploymentList',
		component: () => import('@/views/home/admin/EmploymentList.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '就业人员',
			icon: 'el-icon-user'
		}
	},
	{
		path: 'admin/categories',
		name: 'CategoryManagement',
		component: () => import('@/views/home/admin/CategoryManagement.vue'),
		meta: {
			isRouter: true,
			isTab: true,
			name: '职位类别',
			icon: 'el-icon-collection-tag'
		}
	},
	{
		path: '*',
		redirect: {
			name: '404'
		}
	}]
}
]

// 创建一个 router 实例
const router = new VueRouter({
	// routes 用于定义 路由跳转 规则
	routes,
	// mode 用于去除地址中的 #
	mode: 'history',
	// scrollBehavior 用于定义路由切换时，页面滚动。
	scrollBehavior: () => ({
		y: 0
	}),
	// isAddDynamicMenuRoutes 表示是否已经添加过动态菜单（防止频繁请求动态菜单）
	isAddDynamicMenuRoutes: true
})


// 添加全局路由导航守卫
router.beforeEach((to, from, next) => {
	// 当开启导航守卫时，验证 token 是否存在。
	// to.meta.isRouter 表示是否开启动态路由
	// isDynamicRoutes 判断该路由是否为动态路由（页面刷新时，动态路由没有 isRouter 值，此时 to.meta.isRouter 条件不成立，即动态路由拼接逻辑不能执行）
	if (to.meta.isRouter) {
		// 获取 token 值
		let token = getToken()
		// token 不存在时，跳转到 登录页面
		if (!token || !/\S/.test(token)) {
			next({
				name: 'Login'
			})
		}
	}
	
	// 处理tab页的状态
	if (to.meta.isTab) {
		// 获取vuex store实例
		const store = router.app.$store
		if (store) {
			// 更新当前激活的tab
			store.dispatch('common/updateMainTabsActiveName', to.name)
			// 检查并添加新的tab
			const mainTabs = store.state.common.mainTabs
			const isTabExist = mainTabs.some(item => item.name === to.name)
			if (!isTabExist) {
				store.dispatch('common/updateMainTabs', [...mainTabs, {
					name: to.name,
					params: to.params,
					query: to.query
				}])
			}
		}
	}
	
	next()
})


// 返回路由的基本格式
function getRoute(item) {
	// 路由基本格式
	let route = {
		// 路由的路径
		path: '',
		// 路由名
		name: '',
		// 路由所在组件
		component: null,
		meta: {
			// 开启路由守卫标志
			isRouter: true,
			// 开启标签页显示标志
			isTab: true,
			// iframe 标签指向的地址（数据以 http 或者 https 开头时，使用 iframe 标签显示）
			iframeUrl: '',
			// 开启动态路由标志
			isDynamic: true,
			// 动态菜单名称（nameZH 显示中文， nameEN 显示英文）
			name_zh: item.name_zh,
			name_en: item.name_en,
			// 动态菜单项的图标
			icon: item.icon,
			// 菜单项的 ID
			menuId: item.menuId,
			// 菜单项的父菜单 ID
			parentId: item.parentId,
			// 菜单项排序依据
			orderNum: item.orderNum,
			// 菜单项类型（0: 目录，1: 菜单项，2: 按钮）
			type: item.type
		},
		// 路由的子路由
		children: []
	}
	// 如果存在 url，则根据 url 进行相关处理（判断是 iframe 类型还是 普通类型）
	if (item.url && /\S/.test(item.url)) {
		// 若 url 有前缀 /，则将其去除，方便后续操作。
		item.url = item.url.replace(/^\//, '')
		// 定义基本路由规则，将 / 使用 - 代替
		route.path = item.url.replace('/', '-')
		route.name = item.url.replace('/', '-')
		// 如果是 外部 url，使用 iframe 标签展示，不用指定 component，重新指定 path、name 以及 iframeUrl。
		if (isURL(item.url)) {
			route['path'] = `iframe-${item.menuId}`
			route['name'] = `iframe-${item.menuId}`
			route['meta']['iframeUrl'] = item.url
		} else {
			// 如果是项目模块，使用 route-view 标签展示，需要指定 component(加载指定目录下的 vue 组件)
			route.component = () => import(`@/views/dynamic/${item.url}.vue`) || null
		}
	}
	// 返回 route
	return route
}

// 解决相同路径跳转报错
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
	if (onResolve || onReject)
		return routerPush.call(this, location, onResolve, onReject)
	return routerPush.call(this, location).catch(error => error)
}

export default router
